<template>
  <div class="login-container">
    <div class="login-background">
      <!-- 背景装饰 -->
      <div class="medical-pattern"></div>
    </div>
    
    <div class="login-box">
      <!-- 系统标题 -->
      <div class="login-header">
        <div class="system-logo">
          <div class="logo-icon">⚕</div>
          <div class="logo-text">
            <h2>康复药店医药管理系统</h2>
            <p>Medical Management System</p>
          </div>
        </div>
      </div>
      
      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username">
            用户账号
          </label>
          <input 
            id="username"
            v-model="loginForm.username" 
            type="text" 
            placeholder="请输入用户账号"
            required
            autocomplete="username"
          >
        </div>
        
        <div class="form-group">
          <label for="password">
            登录密码
          </label>
          <input 
            id="password"
            v-model="loginForm.password" 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请输入登录密码"
            required
            autocomplete="current-password"
          >
          <button 
            type="button" 
            class="password-toggle"
            @click="showPassword = !showPassword"
          >
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </button>
        </div>
        
        <div class="form-group">
          <label for="role">
            用户角色
          </label>
          <select id="role" v-model="loginForm.role" required @change="fillDefaultCredentials">
            <option value="">请选择用户角色</option>
            <option value="admin">系统管理员</option>
            <option value="pharmacist">执业药师</option>
            <option value="cashier">收银员</option>
            <option value="warehouse">库管员</option>
          </select>
        </div>
        
        <div class="form-options">
          <label class="checkbox-group">
            <input type="checkbox" v-model="loginForm.remember">
            <span class="checkmark"></span>
            记住密码
          </label>
          
          <a href="#" class="forgot-password" @click.prevent="forgotPassword">
            忘记密码？
          </a>
        </div>
        
        <button type="submit" class="login-btn" :disabled="isLoading">
          <span v-if="isLoading" class="loading-spinner">⟳</span>
          {{ isLoading ? '登录中...' : '登录系统' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 定义事件
const emit = defineEmits<{
  login: [userInfo: { username: string; role: string; name: string }]
}>()

// 表单数据
const loginForm = ref({
  username: '',
  password: '',
  role: '',
  remember: false
})

// 界面状态
const showPassword = ref(false)
const isLoading = ref(false)

// 预设用户数据
const users = {
  'admin': { password: 'admin123', name: '张管理', role: 'admin' },
  'pharmacist': { password: 'pharm123', name: '李药师', role: 'pharmacist' },
  'cashier': { password: 'cash123', name: '王收银', role: 'cashier' },
  'warehouse': { password: 'ware123', name: '赵库管', role: 'warehouse' }
}

// 角色对应的默认账号密码
const roleCredentials = {
  'admin': { username: 'admin', password: 'admin123' },
  'pharmacist': { username: 'pharmacist', password: 'pharm123' },
  'cashier': { username: 'cashier', password: 'cash123' },
  'warehouse': { username: 'warehouse', password: 'ware123' }
}

// 登录处理
const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password || !loginForm.value.role) {
    alert('请填写完整的登录信息')
    return
  }
  
  isLoading.value = true
  
  // 模拟登录延迟
  setTimeout(() => {
    const user = users[loginForm.value.username as keyof typeof users]
    
    if (!user) {
      alert('用户账号不存在')
      isLoading.value = false
      return
    }
    
    if (user.password !== loginForm.value.password) {
      alert('密码错误')
      isLoading.value = false
      return
    }
    
    if (user.role !== loginForm.value.role) {
      alert('用户角色选择错误')
      isLoading.value = false
      return
    }
    
    // 登录成功
    const userInfo = {
      username: loginForm.value.username,
      role: loginForm.value.role,
      name: user.name
    }
    
    // 记住密码处理
    if (loginForm.value.remember) {
      localStorage.setItem('remembered_user', JSON.stringify({
        username: loginForm.value.username,
        role: loginForm.value.role
      }))
    }
    
    isLoading.value = false
    emit('login', userInfo)
  }, 1000)
}

// 根据角色自动填充账号密码
const fillDefaultCredentials = () => {
  const role = loginForm.value.role as keyof typeof roleCredentials
  if (role && roleCredentials[role]) {
    loginForm.value.username = roleCredentials[role].username
    loginForm.value.password = roleCredentials[role].password
  }
}

// 监听角色变化，自动填充对应账号密码
watch(() => loginForm.value.role, () => {
  fillDefaultCredentials()
})

// 忘记密码
const forgotPassword = () => {
  alert('请联系系统管理员重置密码\n电话：400-888-9999')
}

// 页面加载时恢复记住的用户信息
const loadRememberedUser = () => {
  const remembered = localStorage.getItem('remembered_user')
  if (remembered) {
    const userInfo = JSON.parse(remembered)
    loginForm.value.username = userInfo.username
    loginForm.value.role = userInfo.role
    loginForm.value.remember = true
    // 如果有记住的角色，也自动填充密码
    fillDefaultCredentials()
  }
}

// 初始化
loadRememberedUser()
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.medical-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, #ffffff 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, #ffffff 2px, transparent 2px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.login-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 420px;
  max-width: 90vw;
  padding: 40px 35px;
  position: relative;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.system-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

.logo-icon {
  font-size: 48px;
  color: #3498db;
  text-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.logo-text h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.logo-text p {
  color: #7f8c8d;
  margin: 5px 0 0 0;
  font-size: 12px;
  font-style: italic;
}

.login-form {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #34495e;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #fff;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #7f8c8d;
  padding: 4px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #34495e;
}

.checkbox-group input {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #bdc3c7;
  border-radius: 3px;
  margin-right: 8px;
  position: relative;
  background: #fff;
  transition: all 0.3s ease;
}

.checkbox-group input:checked + .checkmark {
  background: #3498db;
  border-color: #3498db;
}

.checkbox-group input:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 12px;
  top: -2px;
  left: 3px;
}

.forgot-password {
  color: #3498db;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #2980b9;
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2980b9, #1f639a);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-box {
    padding: 30px 25px;
    margin: 20px;
  }
  
  .system-logo {
    flex-direction: column;
    gap: 10px;
  }
  
  .logo-icon {
    font-size: 40px;
  }
  
  .logo-text h2 {
    font-size: 18px;
  }
  
  .form-options {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}
</style> 